<template lang="html">
  <div>
    <div class="input-area">
      <div class="title">
        <input type="text" class="title-input">
      </div>
      <div class="textarea">
        <!-- <textarea name="name" class="textarea-input" @input="input" v-model="textarea" placeholder="请输入内容"></textarea> -->
        <textarea name="name" class="textarea-input" v-model="textarea" placeholder="请输入内容" @input="input2()" ref="textarea"></textarea>
      </div>
    </div>
    <a @click="showInfo()">提交</a>
    <div class="info-row">
      <p>请输入x个字</p>
      <ul>
        <a href="">保存草稿</a>
        <a>提交</a>
      </ul>
    </div>
    <mu-slider v-model="value1.value" :step="value1.step" :max="10" class="slider"/>
    <br>
    <br>
    <br>
    <a class="btn" @click="changeType('red')">红</a>
    <br>
    <a class="btn" @click="changeType('blue')">蓝</a>
    <modal ref="modal"></modal>
  </div>
</template>

<script>
import emojiRegex from 'emoji-regex'
import modal from './tmp/modal'
import Tool from '@/assets/script/tool'
export default {
  data () {
    return {
      textarea: "",
      value1: {
        value: 0,
        min: 0,
        max: 10,
        step: 1,
      },
      show: false,
      type: ""
    }
  },
  methods: {
    input2 () {
      
    },
    showInfo () {
      let textarea = this.$refs.textarea;
      let textarea2 = document.querySelector(".textarea-input");
      let rows = textarea2.rows;
      let cols = textarea2.cols;
      // for (var i in textarea2) {
      //   console.log(i, textarea2[i]);
      // }
      // console.log(textarea2);
      // console.log(textarea);
      console.log({rows: rows, cols: cols});
    },
    input () {
      console.log(this.textarea);
      // var regRule = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g;
      // if(this.textarea.match(regRule)) {
      //     this.textarea = this.textarea.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
      //     alert("不支持表情");
      // }
      const regex = emojiRegex();
      if (this.textarea.match(regex)) {
        this.textarea = this.textarea.replace(regex, "");
        alert("不支持表情");
      }
    },
    changeType (color) {
      this.$refs.modal.setType(color)
    }
  },
  created () {
    Tool.setAdaption();
  },
  components: {
    modal
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.input-area {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  background-color: #ffffff;
  .title-input {
    width: 100%;
    height: 0.6rem;
    line-height: 0.4rem;
    font-size: 0.32rem;
    color: #999;
    border: none;
  }
  .textarea-input {
    width: 100%;
    height: 4rem;
    color: #444;
    line-height: 0.4rem;
    font-size: 0.32rem;
    border: none;
    resize: none;
  }
}
.info-row {
  width: 100%;
  background-color: #999999;
}
.btn {
  font-size: px2rem(32);
  margin-bottom: px2rem(30);
  display: block;
}
</style>
